<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="项目" prop="projectId">
                <el-select
                    v-model="queryParams.projectId"
                    placeholder="请选择项目"
                    clearable
                >
                    <el-option
                        v-for="item in projectList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">

            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="addUserProject"
                >添加
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    :disabled="multiple"
                    @click="removeUserProject"
                >移除项目用户
                </el-button>
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!--        <el-dialog title="报警人员设置" :visible.sync="open3" width="625px" append-to-body>-->
        <!--            <el-transfer-->
        <!--                v-model="existNotice"-->
        <!--                :data="unExistNotice"-->
        <!--                :titles="['项目用户', '报警人员']"-->
        <!--            ></el-transfer>-->
        <!--            <div slot="footer" class="dialog-footer">-->
        <!--                <el-button type="primary" @click="addNotice">确 定</el-button>-->
        <!--                <el-button @click="cancel">取 消</el-button>-->
        <!--            </div>-->
        <!--        </el-dialog>-->

        <el-table v-loading="loading" :data="userProjectList" @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="50" align="center"/>
            <el-table-column label="序号" align="center" type="index" :index="calculateIndex"/>
            <el-table-column label="头像" align="center" prop="imageUrl">
                <template slot-scope="scope">
                    <image-preview :key="scope.row.id" :src="scope.row.avatar" :width="50" :height="50"/>
                </template>
            </el-table-column>
            <el-table-column label="用户名称" align="center" key="username" prop="username"
                             :show-overflow-tooltip="true"
            />
            <el-table-column label="手机号码" align="center" prop="mobile"/>
            <el-table-column label="昵称" align="center" key="mobile" prop="nickname"/>
            <el-table-column label="所在项目" align="center" prop="projectName"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="160">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                align="center"
                width="220"
                class-name="small-padding fixed-width"
            >

                <template slot-scope="scope" v-if="scope.row.id !== 1">


                    <el-button
                        size="mini"
                        type="text"
                        @click="handleAuthProjectRole(scope.row)"
                        v-hasPermi="['system:project-user:auth-role']"
                    >分配角色
                    </el-button>

                </template>

            </el-table-column>

        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <el-dialog :title="allocationTitle" :visible.sync="allocationOpen" width="800px" append-to-body>
            <el-form :model="queryUserParams" ref="allocationQueryForm" :rules="allocationQueryRules"
                     :inline="true" label-width="85px" @submit.native.prevent
            >
                <el-form-item label="用户名称" prop="username">
                    <el-input
                        v-model="queryUserParams.username"
                        placeholder="请输入用户名称搜索用户"
                        clearable
                        size="small"
                        @keyup.enter.native="selectUserList"
                    />
                </el-form-item>
                <el-form-item label="手机号码" prop="mobile">
                    <el-input
                        v-model="queryUserParams.mobile"
                        placeholder="请输入手机号码搜索用户"
                        clearable
                        size="small"
                        @keyup.enter.native="selectUserList"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="selectUserList">搜索</el-button>
                </el-form-item>
            </el-form>

            <el-table
                :data="userList"
                height="250"
                border
                style="width: 100%"
            >

                <el-table-column prop="username" label="用户名称" align="center" width="150"/>
                <el-table-column prop="nickname" label="昵称" align="center" width="150"/>
                <el-table-column prop="mobile" label="手机号码" align="center" width="200"/>

                <el-table-column label="项目" align="center">
                    <template slot-scope="scope">

                        <el-select
                            v-model="scope.row.projectId"
                            placeholder="请选择项目"
                            clearable
                        >
                            <el-option
                                v-for="item in projectList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>

                    </template>

                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">

                        <el-button type="primary" size="small" @click="allocationClick(scope.row)">
                            添加
                        </el-button>

                    </template>

                </el-table-column>
            </el-table>

            <pagination
                v-show="userListTotal>0"
                :total="userListTotal"
                :page.sync="queryUserParams.pageNo"
                :limit.sync="queryUserParams.pageSize"
                @pagination="selectUserList"
            />

        </el-dialog>

        <el-dialog title="分配角色" :visible.sync="authProjectRoleOpen" width="800px" append-to-body>
            <el-form :model="authProjectRoleForm" :inline="true" label-width="85px" @submit.native.prevent>
                <el-form-item label="项目" prop="projectId">
                    <el-select
                        v-model="authProjectRoleForm.projectId"
                        placeholder="请选择项目"
                        clearable
                        @change="changeAnthProjectRole"
                    >
                        <el-option
                            v-for="item in projectList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="roleIds">
                    <el-select
                        v-model="authProjectRoleForm.roleIds"
                        placeholder="请选择角色"
                        clearable
                        multiple
                        style="width: 500px"
                    >
                        <el-option
                            v-for="item in roleList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="allocatedProjectRole">分配</el-button>
            </div>

<!--            <el-tabs v-model="activeName" type="border-card">-->

<!--                <el-tab-pane label="已分配" name="yes">-->

<!--                    <el-table v-loading="loading" :data="yesProjectRoleList" @selection-change="handleSelectionChange">-->

<!--                        <el-table-column label="角色名称" align="center" prop="projectRoleName"/>-->
<!--                        <el-table-column-->
<!--                            label="操作"-->
<!--                            align="center"-->
<!--                            class-name="small-padding fixed-width"-->
<!--                        >-->
<!--                            <template slot-scope="scope" v-if="scope.row.id !== 1">-->
<!--                                <el-button-->
<!--                                    size="mini"-->
<!--                                    type="text"-->
<!--                                    @click="unAllocatedProjectRole(scope.row)"-->
<!--                                >移除-->
<!--                                </el-button>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
<!--                    </el-table>-->

<!--                    &lt;!&ndash;          <pagination&ndash;&gt;-->
<!--                    &lt;!&ndash;            v-show="yesProjectRoleTotal > 0"&ndash;&gt;-->
<!--                    &lt;!&ndash;            :total="yesProjectRoleTotal"&ndash;&gt;-->
<!--                    &lt;!&ndash;            :page.sync="projectRoleQueryParams.pageNo"&ndash;&gt;-->
<!--                    &lt;!&ndash;            :limit.sync="projectRoleQueryParams.pageSize"&ndash;&gt;-->
<!--                    &lt;!&ndash;            @pagination="getProjectRoleAllocationList"&ndash;&gt;-->
<!--                    &lt;!&ndash;          />&ndash;&gt;-->
<!--                </el-tab-pane>-->

<!--                <el-tab-pane label="未分配" name="no">-->
<!--                    <el-table v-loading="loading" :data="noProjectRoleList" @selection-change="handleSelectionChange">-->
<!--                        &lt;!&ndash;        <el-table-column type="selection" width="55" align="center" />&ndash;&gt;-->
<!--                        <el-table-column label="角色名称" align="center" prop="projectRoleName"/>-->
<!--                        <el-table-column-->
<!--                            label="操作"-->
<!--                            align="center"-->
<!--                            class-name="small-padding fixed-width"-->
<!--                        >-->
<!--                            <template slot-scope="scope" v-if="scope.row.id !== 1">-->
<!--                                <el-button-->
<!--                                    size="mini"-->
<!--                                    type="text"-->
<!--                                    @click="allocatedProjectRole(scope.row)"-->
<!--                                >分配-->
<!--                                </el-button>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
<!--                    </el-table>-->

<!--                    &lt;!&ndash;          <pagination&ndash;&gt;-->
<!--                    &lt;!&ndash;            v-show="noProjectRoleTotal > 0"&ndash;&gt;-->
<!--                    &lt;!&ndash;            :total="noProjectRoleTotal"&ndash;&gt;-->
<!--                    &lt;!&ndash;            :page.sync="projectRoleQueryParams.pageNo"&ndash;&gt;-->
<!--                    &lt;!&ndash;            :limit.sync="projectRoleQueryParams.pageSize"&ndash;&gt;-->
<!--                    &lt;!&ndash;            @pagination="getProjectRoleAllocationList"&ndash;&gt;-->
<!--                    &lt;!&ndash;          />&ndash;&gt;-->

<!--                </el-tab-pane>-->

<!--            </el-tabs>-->

        </el-dialog>


        <el-dialog title="移除项目用户" :visible.sync="deleteProjectUserOpen" width="800px" append-to-body>
            <el-table
                :data="deleteProjectUserForm.data"
                height="250"
                border
                style="width: 100%"
            >

                <el-table-column prop="username" label="用户名称" align="center" width="150"/>
                <el-table-column prop="nickname" label="昵称" align="center" width="150"/>
                <el-table-column prop="mobile" label="手机号码" align="center" width="200"/>

                <el-table-column label="项目" align="center">
                    <template slot-scope="scope">

                        <el-select
                            v-model="scope.row.projectId"
                            placeholder="请选择项目"
                            clearable
                        >
                            <el-option
                                v-for="item in projectList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>

                    </template>

                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="unAllocatedProjectRole">移除</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
import { addProjectRoleUser, delProjectRoleUser } from '@/api/system/projectRoleUser'
import { getProjectRoleListSimple, listRoleAllocation,getProjectRoleUser } from '@/api/system/projectRole'
import { mapGetters } from 'vuex'
import {
    addProjectUser,
    delProjectUser,
    pageListProjectUser,
    listProjectUser,
    updateUserProjectNotice
} from '@/api/business/projectUser'
import {
    searchPersonalUser
} from '@/api/business/personalUser'
import { getProjectListSimple } from '@/api/system/project'

export default {
    name: 'Project',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 用户-项目中间表格数据
            userProjectList: [],
            // 项目列表
            projectList: [],
            // 角色列表
            roleList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                id: null,
                projectId: null
            },
            // 表单参数
            form: {
                userId: null,
                projectId: null
            },
            // 分配角色表单
            authProjectRoleForm:{
                userId: null,
                projectId: null,
                roleIds: []
            },
            // 移除项目用户表单
            deleteProjectUsers:[],
            deleteProjectUserForm:{
                data:[]
            },
            deleteProjectUserOpen:false,
            // 表单校验
            rules: {},
            allocationTitle: '',
            allocationFlag: null,
            allocationOpen: false,

            queryUserParams: {
                pageNo: 1,
                pageSize: 10,
                mobile: undefined,
                nickname: undefined
            },

            allocationQueryRules: {},

            userList: null,
            userListTotal: 0,

            projectRoleQueryParams: {
                pageNo: 1,
                pageSize: 10,
                projectId: ''
            },

            projectRoleUser: {
                projectRoleId: null,
                id: null
            },
            authProjectRoleOpen: false,
            // 项目角色列表
            yesProjectRoleList: [],
            yesProjectRoleTotal: 0,
            yesProjectRoleLoading: false,
            noProjectRoleList: [],
            noProjectRoleTotal: 0,
            noProjectRoleLoading: false,
            activeName: 'no',
            open3: false,
            existNotice: [],
            unExistNotice: []
        }
    },
    created() {
        this.getList()
        this.getProjectList()
        this.getRoleList()
    },
    computed: {
        ...mapGetters([
            'projectId'
        ])
    },
    methods: {

        unAllocatedProjectRole() {
            delProjectRoleUser(this.deleteProjectUserForm).then(response => {
                if (response.code === 0) {
                    this.$message.success('移除成功')
                    this.deleteProjectUserOpen = false
                    this.getList()
                }
            })
        },
        handleAuthProjectRole(row) {
            this.authProjectRoleForm.userId = row.id
            this.authProjectRoleOpen = true
            // this.getProjectRoleAllocationList()
        },
        allocatedProjectRole() {
            addProjectRoleUser(this.authProjectRoleForm).then(response => {
                if (response.code === 0) {
                    this.$message.success('分配成功')
                    this.authProjectRoleOpen = false
                    this.getList()
                }
            })
        },

        getProjectRoleAllocationList() {

            this.projectRoleQueryParams.projectId = this.projectId

            listRoleAllocation(this.projectRoleQueryParams).then(response => {
                this.yesProjectRoleList = response.data.yes
                this.yesProjectRoleTotal = response.data.yes.length
                this.yesProjectRoleLoading = false

                this.noProjectRoleList = response.data.no
                this.noProjectRoleTotal = response.data.no.length
                this.noProjectRoleLoading = false
            })
        },

        // 添加项目给用户
        allocationClick(row) {
            console.log(row)
            this.form.userId = row.id
            this.form.projectId = row.projectId
            addProjectUser(this.form).then(response => {

                this.$message.success('添加成功')

                // this.userProject = {}
                // this.allocationOpen = false
                // this.queryUserParams.mobile = null
                // this.userList = null

                this.getList()
            })
        },

        // 查询用户
        selectUserList() {
            this.$refs.allocationQueryForm.validate(valid => {
                if (valid) {
                    searchPersonalUser(this.queryUserParams).then(response => {
                            if (response.data.list.length === 0) {
                                this.$message.error('暂无数据')
                            }
                            response.data.list.forEach(item => {
                                item.projectId = null
                            })
                            this.userList = response.data.list
                            // this.userList.forEach(item => {
                            //     item.projectId = null
                            // })
                            console.log(this.userList)
                            this.userListTotal = response.data.total
                        }
                    )
                }
            })
        },

        // 获取项目列表
        getProjectList() {
            getProjectListSimple().then(res => {
                this.projectList = res.data
            })
        },
        // 获取角色列表
        getRoleList() {
            let obj = {
                projectId:this.authProjectRoleForm.projectId
            }
            getProjectRoleListSimple(obj).then(res => {
                this.roleList = res.data
            })
        },
        // 切换分配角色的项目
        changeAnthProjectRole(){
            this.roleList = []
            this.getSelectProjectRoleUser()
            this.getRoleList()
        },
        // 查询项目用户有哪些项目角色
        getSelectProjectRoleUser(){
            let obj  = {
                userId:this.authProjectRoleForm.userId,
                projectId:this.authProjectRoleForm.projectId
            }
            getProjectRoleUser(obj).then(res=>{
                this.authProjectRoleForm.roleIds = []
                console.log('查询项目用户有哪些项目角色',res)
                res.data.forEach(item=>{
                    this.authProjectRoleForm.roleIds.push(item.id)
                })
            })
        },
        addUserProject() {

            this.allocationTitle = '搜索添加项目用户'
            this.allocationFlag = 'user'
            this.allocationOpen = true
            this.userList = []
            // this.form.projectId = this.projectId
        },

        removeUserProject() {
            this.deleteProjectUserForm.data = this.deleteProjectUsers
            this.deleteProjectUserOpen = true
        },
        showNotice() {
            this.getNoticeList()
        },

        addNotice() {

            if (this.existNotice.length === 0) {
                this.existNotice.push(0)
            }

            updateUserProjectNotice(this.projectId, this.existNotice).then(response => {
                this.$message.success('操作成功')
                this.getList()
                this.open3 = false
            })
            console.log(this.unExistNotice)
            console.log(this.existNotice)
        },

        calculateIndex(index) {
            const pageNo = this.queryParams.pageNo
            const pageSize = this.queryParams.pageSize
            return index + 1 + (pageNo - 1) * pageSize
        },

        /** 查询用户-项目中间列表 */
        getList() {
            this.loading = true
            // this.queryParams.projectId = this.projectId
            pageListProjectUser(this.queryParams).then(response => {
                this.userProjectList = response.data.list
                this.total = response.data.total
                this.loading = false
            })
        },

        getNoticeList() {
            this.queryParams.projectId = this.projectId
            listProjectUser(this.queryParams).then(response => {

                console.log(response)

                this.unExistNotice = []
                // 报警通知
                this.existNotice = []

                response.data.forEach(item => {
                    let obj = {
                        key: item.id,
                        label: item.nickname
                    }
                    this.unExistNotice.push(obj)

                    if (item.isNotice) {
                        this.existNotice.push(item.id)
                    }
                })

                this.open3 = true
            })
        },

        cancel() {
            this.open = false
            this.open3 = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                projectId: null
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNo = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.deleteProjectUsers = selection.map(item=>{

                return{
                    userId:item.id,
                    nickname:item.nickname,
                    mobile:item.mobile,
                    projectId:null
                }
            })
            this.single = selection.length !== 1
            this.multiple = !selection.length
        }
    }
}
</script>
